{{ define "css"}}
<style type="text/css">
    /*body {background: #e5e5e5;}*/
    .pricing-table {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        flex-flow: row wrap;
        justify-content: space-between
    }

    .pricing-table.is-comparative .pricing-plan {
        border-radius: initial;
        margin: 0
    }

    .pricing-table.is-comparative .pricing-plan:not(:last-child) {
        border-right: none
    }

    .pricing-table.is-comparative .pricing-plan:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px
    }

    .pricing-table.is-comparative .pricing-plan:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px
    }

    .pricing-table.is-comparative .pricing-plan.is-active {
        border: .1rem solid #f5f5f5;
        border-radius: 4px
    }

    .pricing-table .pricing-plan {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        background-color: #fff;
        border: .1rem solid #f5f5f5;
        border-radius: 4px;
        list-style-type: none;
        transition: .25s;
        margin: .5em
    }

    .pricing-table .pricing-plan .plan-header {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-color: #fff;
        color: #4a4a4a;
        font-size: 1.25rem;
        font-weight: 600;
        padding: .75em;
        align-content: center;
        text-align: center
    }

    .pricing-table .pricing-plan .plan-item {
        background: #f5f5f5;
        border-bottom: .1rem solid #fff;
        padding: .75em;
        align-content: center;
        text-align: center;
        font-size: .9em;
        color: #7a7a7a
    }

    .pricing-table .pricing-plan .plan-price {
        background-color: #fff;
        color: #4a4a4a;
        font-size: .75rem;
        font-weight: 400;
        padding: .75em;
        align-content: center;
        text-align: center
    }

    .pricing-table .pricing-plan .plan-price .plan-price-amount {
        font-size: 2.5rem;
        font-weight: 700
    }

    .pricing-table .pricing-plan .plan-price .plan-price-amount .plan-price-currency {
        vertical-align: super;
        font-size: 1rem !important;
        font-weight: 400 !important;
        color: #4a4a4a;
        margin-right: .25rem
    }

    .pricing-table .pricing-plan .plan-footer {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: .75em;
        align-content: center;
        text-align: center;
        margin-top: auto
    }

    .pricing-table .pricing-plan.is-active {
        box-shadow: 0 8px 12px 0 rgba(122,122,122,0.2);
        transform: scale(1.05)
    }

    .pricing-table .pricing-plan.is-active .plan-price .plan-price-amount {
        color: #00d1b2
    }

    .pricing-table .pricing-plan.is-active .plan-footer .button {
        background-color: #00d1b2;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-active .plan-footer .button:hover,.pricing-table .pricing-plan.is-active .plan-footer .button.is-hovered {
        background-color: #00c4a7;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-active .plan-footer .button:focus,.pricing-table .pricing-plan.is-active .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(0,209,178,0.25);
        color: #fff
    }

    .pricing-table .pricing-plan.is-active .plan-footer .button:active,.pricing-table .pricing-plan.is-active .plan-footer .button.is-active {
        background-color: #00b89c;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-active .plan-footer .button[disabled] {
        background-color: #00d1b2;
        border-color: transparent
    }

    .pricing-table .pricing-plan.is-white .plan-price .plan-price-amount {
        color: #fff
    }

    .pricing-table .pricing-plan.is-white .plan-footer .button {
        background-color: #fff;
        border-color: transparent;
        color: #0a0a0a
    }

    .pricing-table .pricing-plan.is-white .plan-footer .button:hover,.pricing-table .pricing-plan.is-white .plan-footer .button.is-hovered {
        background-color: #f9f9f9;
        border-color: transparent;
        color: #0a0a0a
    }

    .pricing-table .pricing-plan.is-white .plan-footer .button:focus,.pricing-table .pricing-plan.is-white .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(255,255,255,0.25);
        color: #0a0a0a
    }

    .pricing-table .pricing-plan.is-white .plan-footer .button:active,.pricing-table .pricing-plan.is-white .plan-footer .button.is-active {
        background-color: #f2f2f2;
        border-color: transparent;
        color: #0a0a0a
    }

    .pricing-table .pricing-plan.is-white .plan-footer .button[disabled] {
        background-color: #fff;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-black .plan-price .plan-price-amount {
        color: #0a0a0a
    }

    .pricing-table .pricing-plan.is-black .plan-footer .button {
        background-color: #0a0a0a;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-black .plan-footer .button:hover,.pricing-table .pricing-plan.is-black .plan-footer .button.is-hovered {
        background-color: #040404;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-black .plan-footer .button:focus,.pricing-table .pricing-plan.is-black .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(10,10,10,0.25);
        color: #fff
    }

    .pricing-table .pricing-plan.is-black .plan-footer .button:active,.pricing-table .pricing-plan.is-black .plan-footer .button.is-active {
        background-color: #000;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-black .plan-footer .button[disabled] {
        background-color: #0a0a0a;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-light .plan-price .plan-price-amount {
        color: #f5f5f5
    }

    .pricing-table .pricing-plan.is-light .plan-footer .button {
        background-color: #f5f5f5;
        border-color: transparent;
        color: #363636
    }

    .pricing-table .pricing-plan.is-light .plan-footer .button:hover,.pricing-table .pricing-plan.is-light .plan-footer .button.is-hovered {
        background-color: #eee;
        border-color: transparent;
        color: #363636
    }

    .pricing-table .pricing-plan.is-light .plan-footer .button:focus,.pricing-table .pricing-plan.is-light .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(245,245,245,0.25);
        color: #363636
    }

    .pricing-table .pricing-plan.is-light .plan-footer .button:active,.pricing-table .pricing-plan.is-light .plan-footer .button.is-active {
        background-color: #e8e8e8;
        border-color: transparent;
        color: #363636
    }

    .pricing-table .pricing-plan.is-light .plan-footer .button[disabled] {
        background-color: #f5f5f5;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-dark .plan-price .plan-price-amount {
        color: #363636
    }

    .pricing-table .pricing-plan.is-dark .plan-footer .button {
        background-color: #363636;
        border-color: transparent;
        color: #f5f5f5
    }

    .pricing-table .pricing-plan.is-dark .plan-footer .button:hover,.pricing-table .pricing-plan.is-dark .plan-footer .button.is-hovered {
        background-color: #2f2f2f;
        border-color: transparent;
        color: #f5f5f5
    }

    .pricing-table .pricing-plan.is-dark .plan-footer .button:focus,.pricing-table .pricing-plan.is-dark .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(54,54,54,0.25);
        color: #f5f5f5
    }

    .pricing-table .pricing-plan.is-dark .plan-footer .button:active,.pricing-table .pricing-plan.is-dark .plan-footer .button.is-active {
        background-color: #292929;
        border-color: transparent;
        color: #f5f5f5
    }

    .pricing-table .pricing-plan.is-dark .plan-footer .button[disabled] {
        background-color: #363636;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-primary .plan-price .plan-price-amount {
        color: #00d1b2
    }

    .pricing-table .pricing-plan.is-primary .plan-footer .button {
        background-color: #00d1b2;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-primary .plan-footer .button:hover,.pricing-table .pricing-plan.is-primary .plan-footer .button.is-hovered {
        background-color: #00c4a7;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-primary .plan-footer .button:focus,.pricing-table .pricing-plan.is-primary .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(0,209,178,0.25);
        color: #fff
    }

    .pricing-table .pricing-plan.is-primary .plan-footer .button:active,.pricing-table .pricing-plan.is-primary .plan-footer .button.is-active {
        background-color: #00b89c;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-primary .plan-footer .button[disabled] {
        background-color: #00d1b2;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-link .plan-price .plan-price-amount {
        color: #3273dc
    }

    .pricing-table .pricing-plan.is-link .plan-footer .button {
        background-color: #3273dc;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-link .plan-footer .button:hover,.pricing-table .pricing-plan.is-link .plan-footer .button.is-hovered {
        background-color: #276cda;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-link .plan-footer .button:focus,.pricing-table .pricing-plan.is-link .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(50,115,220,0.25);
        color: #fff
    }

    .pricing-table .pricing-plan.is-link .plan-footer .button:active,.pricing-table .pricing-plan.is-link .plan-footer .button.is-active {
        background-color: #2366d1;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-link .plan-footer .button[disabled] {
        background-color: #3273dc;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-info .plan-price .plan-price-amount {
        color: #209cee
    }

    .pricing-table .pricing-plan.is-info .plan-footer .button {
        background-color: #209cee;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-info .plan-footer .button:hover,.pricing-table .pricing-plan.is-info .plan-footer .button.is-hovered {
        background-color: #1496ed;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-info .plan-footer .button:focus,.pricing-table .pricing-plan.is-info .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(32,156,238,0.25);
        color: #fff
    }

    .pricing-table .pricing-plan.is-info .plan-footer .button:active,.pricing-table .pricing-plan.is-info .plan-footer .button.is-active {
        background-color: #118fe4;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-info .plan-footer .button[disabled] {
        background-color: #209cee;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-success .plan-price .plan-price-amount {
        color: #23d160
    }

    .pricing-table .pricing-plan.is-success .plan-footer .button {
        background-color: #23d160;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-success .plan-footer .button:hover,.pricing-table .pricing-plan.is-success .plan-footer .button.is-hovered {
        background-color: #22c65b;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-success .plan-footer .button:focus,.pricing-table .pricing-plan.is-success .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(35,209,96,0.25);
        color: #fff
    }

    .pricing-table .pricing-plan.is-success .plan-footer .button:active,.pricing-table .pricing-plan.is-success .plan-footer .button.is-active {
        background-color: #20bc56;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-success .plan-footer .button[disabled] {
        background-color: #23d160;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-warning .plan-price .plan-price-amount {
        color: #ffdd57
    }

    .pricing-table .pricing-plan.is-warning .plan-footer .button {
        background-color: #ffdd57;
        border-color: transparent;
        color: rgba(0,0,0,0.7)
    }

    .pricing-table .pricing-plan.is-warning .plan-footer .button:hover,.pricing-table .pricing-plan.is-warning .plan-footer .button.is-hovered {
        background-color: #ffdb4a;
        border-color: transparent;
        color: rgba(0,0,0,0.7)
    }

    .pricing-table .pricing-plan.is-warning .plan-footer .button:focus,.pricing-table .pricing-plan.is-warning .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(255,221,87,0.25);
        color: rgba(0,0,0,0.7)
    }

    .pricing-table .pricing-plan.is-warning .plan-footer .button:active,.pricing-table .pricing-plan.is-warning .plan-footer .button.is-active {
        background-color: #ffd83d;
        border-color: transparent;
        color: rgba(0,0,0,0.7)
    }

    .pricing-table .pricing-plan.is-warning .plan-footer .button[disabled] {
        background-color: #ffdd57;
        border-color: transparent;
        box-shadow: none
    }

    .pricing-table .pricing-plan.is-danger .plan-price .plan-price-amount {
        color: #ff3860
    }

    .pricing-table .pricing-plan.is-danger .plan-footer .button {
        background-color: #3273dc;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-danger .plan-footer .button:hover,.pricing-table .pricing-plan.is-danger .plan-footer .button.is-hovered {
        background-color: #ff2b56;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-danger .plan-footer .button:focus,.pricing-table .pricing-plan.is-danger .plan-footer .button.is-focused {
        border-color: transparent;
        box-shadow: 0 0 .5em rgba(255,56,96,0.25);
        color: #fff
    }

    .pricing-table .pricing-plan.is-danger .plan-footer .button:active,.pricing-table .pricing-plan.is-danger .plan-footer .button.is-active {
        background-color: #ff1f4b;
        border-color: transparent;
        color: #fff
    }

    .pricing-table .pricing-plan.is-danger .plan-footer .button[disabled] {
        background-color: #ff3860;
        border-color: transparent;
        box-shadow: none
    }

    @media screen and (min-width: 769px), print {
        .pricing-table.is-comparative {
            margin:.5rem
        }

        .pricing-table.is-comparative.is-features {
            display: none
        }

        .pricing-table.is-comparative .plan-item::before {
            content: attr("data-feature")
        }

        .pricing-table.is-horizontal .pricing-plan {
            display: flex;
            flex-direction: row;
            flex-basis: 100%
        }

        .pricing-table.is-horizontal .pricing-plan .plan-header {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .pricing-table.is-horizontal .pricing-plan .plan-price {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center
        }

        .pricing-table.is-horizontal .pricing-plan .plan-items {
            width: 100%;
            background-color: #f5f5f5;
            columns: 2;
            -webkit-columns: 2;
            -moz-columns: 2;
            column-gap: .1rem
        }

        .pricing-table.is-horizontal .pricing-plan .plan-footer {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: auto
        }
    }

    @media screen and (max-width: 768px) {
        .pricing-table.is-comparative .pricing-plan {
            margin:.5rem
        }

        .pricing-table.is-comparative .pricing-plan.is-plan-first-mobile {
            order: -1
        }

        .pricing-table.is-comparative .pricing-plan.is-features {
            display: none
        }

        .pricing-table.is-comparative .pricing-plan .plan-item::before {
            content: attr(data-feature);
            display: block;
            font-weight: 600;
            font-size: .75rem;
            color: #b5b5b5
        }
    }
</style>
{{ end }}

{{define "content"}}
<div class="container">
    <section class="hero">
        <div class="hero-body has-text-centered">
            <div class="container">
                <p class="title">
                    一次订阅即可浏览所有视频
                </p>
{{/*                <p class="subtitle">*/}}
{{/*                    Light subtitle*/}}
{{/*                </p>*/}}
            </div>
        </div>
    </section>

    <div class="pricing-table">
        {{range .plans}}
        <div class="pricing-plan is-danger">
            <div class="plan-header">{{.Name}}</div>
            <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">￥</span>{{.Price}}</span></div>
            <div class="plan-items">
                <div class="plan-item">{{.Description}}</div>
            </div>
            <div class="plan-footer">
                <a class="button is-fullwidth" href="/plans/{{.Alias}}/purchase">购买</a>
            </div>
        </div>
        {{end}}
    </div>
    <div class="notification" style="margin: 1rem 0rem;">
        <div class="content">
            <h2 class="title is-6">购买须知</h2>
            <ol type="1">
                <li>使用微信扫码支付</li>
                <li>支付后可立即开通会员</li>
                <li>会员可以观看本站的所有视频</li>
            </ol>
        </div>
    </div>
</div>

{{end}}

{{ define "js"}}
{{ end }}
